<template>
  <div class="screen-container">
    <div class="scrren-header">
      <screenfull id="screenfull" class="screen-full hover-effect" />
    </div>
    <!--统计列表-->
    <div class="screen-body">
      <!--左侧统计-->
      <div class="body-gas-left">
        <!--储罐统计-->
        <div class="gas-chart-container" style="margin-top: 68px">
          <div class="chart-header">储罐状态统计</div>
          <div class="tank-total-box">
            <div>
              <div class="screen-label">液位点位数</div>
              <div class="screen-value">
                {{ total.liquidLevelOfNumber ? total.liquidLevelOfNumber : "" }}
              </div>
            </div>
            <div class="tank-status-centerr">
              <div class="screen-label">储罐点位总数</div>
              <div class="screen-value">
                {{ total.tanksOfNumber ? total.tanksOfNumber : "" }}
              </div>
            </div>
            <div>
              <div class="screen-label">压力点位数</div>
              <div class="screen-value">
                {{ total.pressuresOfNumber ? total.pressuresOfNumber : "" }}
              </div>
            </div>
          </div>
        </div>
        <!--储罐异常统计-->
        <div class="gas-chart-container">
          <div class="chart-header">储罐异常数</div>
          <div class="gas-alarm-box">
            <div class="tank-alarm-item">
              <span>{{ alarm.yesterday ? alarm.yesterday : 0 }}</span>
              <span>昨日异常数</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{ alarm.todaySum ? alarm.todaySum : 0 }}</span>
              <span>今日异常数</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{
                alarm.todayOfyesterdayRatio ? alarm.todayOfyesterdayRatio : 0
              }}</span>
              <span>较昨日</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{ alarm.lastWeekSum ? alarm.lastWeekSum : 0 }}</span>
              <span>上周异常数</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{ alarm.thisWeekSum ? alarm.thisWeekSum : 0 }}</span>
              <span>本周异常数</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{
                alarm.todayOfyesterdayRatio ? alarm.todayOfyesterdayRatio : 0
              }}</span>
              <span>较上周</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{ alarm.lastMonthSum ? alarm.lastMonthSum : 0 }}</span>
              <span>上月异常数</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{ alarm.thisMonthSum ? alarm.thisMonthSum : 0 }}</span>
              <span>本月异常数</span>
            </div>
            <div class="tank-alarm-item">
              <span>{{
                alarm.thisMonthOfLastMonthRatio ? alarm.thisMonthOfLastMonthRatio : 0
              }}</span>
              <span>较上月</span>
            </div>
          </div>
        </div>
      </div>
      <!--右侧统计-->
      <div class="body-gas-right">
        <div class="gas-chart-container" style="margin-top: 68px">
          <div class="chart-header">储罐实时数据</div>
          <div class="data-runtime-box">
            <div v-for="(item, index) of runtime" class="runtime-item">
              <div class="item-runtime-left">
                <div class="item-tank-flag"></div>
                <div class="item-status-text">{{ item.tankName }}</div>
              </div>
              <div class="item-tank-content">
                <span v-for="(it, id) in item.monitoringList" class=""
                  >{{ it.parameterName }}:{{ it.realTimeValue }}{{ it.units }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--底部操作栏-->
    <div class="screen-operator">
      <div class="operate-button screen-home" @click="goToHome"></div>
      <div class="operate-button gas" @click="goToGas"></div>
      <div class="operate-button tank-active"></div>
      <div class="operate-button location" @click="goToLocation"></div>
    </div>
  </div>
</template>
<script setup name="Tank">
import axios from "axios";
const baseUrl = ref("http://192.168.124.249:9898");
import Screenfull from "@/components/Screenfull";
const router = useRouter();
const url = ref(
  "http://192.168.124.2:8084/location_system_5.4.9.5/map3d/nosecret.html?company=TSPDH&version=5.4.9.5&type=1&user=lyg&psw=Lyg@2022"
);
const total = ref({});
const alarm = ref({});
const runtime = ref([]);
/** 1:获取设备统计 */
function getTankEquipStatistics() {
  let url = baseUrl.value + "/screen/getTankStatistics";
  axios.get(url).then((res) => {
    total.value = res.data.data;
  });
}

/** 2:获取气体异常统计 */
function getTankAlarmStatistics() {
  let url = baseUrl.value + "/screen/getTankAlarmStatistics";
  axios.get(url).then((res) => {
    alarm.value = res.data.data;
  });
}

/** 3:获取储罐实时数据 */
function getTankRuntimeStatistics() {
  let url = baseUrl.value + "/iotbase/taskList/" + "?dept=" + 100;
  axios.get(url).then((res) => {
    runtime.value = res.data.data;
    //console.log(runtime.value)
  });
}

/** 跳转到首页 */
function goToHome() {
  router.push("/screen");
}

/** 跳转到气体侦测页面 */
function goToGas() {
  router.push("/screen/gas");
}
/** 跳转到定位 */
function goToLocation() {
  window.open(url.value);
}

getTankEquipStatistics();
getTankAlarmStatistics();
getTankRuntimeStatistics();
</script>
